<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Books</title>
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/bootstrap-table.css">

    <script src="static/js/jquery-3.3.1.min.js"></script>
    <script src="static/js/bootstrap.js"></script>
    <script src="static/js/bootstrap-table.js"></script>
    <script src="static/js/bootstrap-table-zh-CN.js"></script>

</head>
<body>

<!--添加弹框内容-->
<form action="/add" method="post" enctype="multipart/form-data">
    <div class="modal fade" id="add_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h3>添加图书</h3>
                    <hr>
                    书名:<input class="form-control" type="text" name="name">
                    作者:<input class="form-control" type="text" name="author">
                    价格:<input class="form-control" type="text" name="price">
                    出版日期:<input class="form-control" type="date" name="time">
                    主图: <input type="file" name="priImgFile">
                    <input type="hidden">
                    <br>
                    副图:<input type="file" name="subImgFiles">
                    <input type="file" name="subImgFiles">

                    <table id="b">
                    </table>
                    <input type="button" id="a" value="再传一张">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-danger btn-sm" id="yes_btn">确认</button>
                </div>
            </div>
        </div>
    </div>
</form>

<!--确认删除弹框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">确认删除?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger btn-sm" id="yes">确认</button>
            </div>
        </div>
    </div>
</div>

<div style="height: 100px"></div>

<div class="col-md-1"></div>
<div class="col-md-10">
    <button class="btn btn-primary" onclick=jump()>网页添加</button>
    <button class="btn btn-primary" data-toggle="modal" data-target="#add_modal">弹框添加</button>
    <div style="height: 30px"></div>
    <hr>
    <div class="col-md-10"></div>
    <table id="content"></table>
</div>
<div class="col-md-1"></div>
</body>

<script>
    var bid;// bid常量 要删除的图书id
    $(function () {
        $("#content").bootstrapTable({
            url: "/list", //请求数据
            pagination: "true", //启用分页
            sidePagination: "server", //后端分页
            sortName: "bid",// 默认按bid排序
            sortOrder: "asc",//升序
            //pageSize:5,
            pageList: [5, 10],//分页5,10为单位
            columns: [ //绑定参数
                {
                    field: "name",
                    title: "书名"
                    // sortable: "true" //排序
                },
                {
                    field: "price",
                    title: "价格",
                    sortable: "true"
                },
                {
                    field: "author",
                    title: "作者",
                    sortable: "true"
                },
                {
                    field: "time",
                    title: "出版日期",
                    // sortable: "true"
                    formatter: function (value, row, index) {
                        return changeDateFormat(value)
                    }
                },
                {
                    field: "priImg",
                    title: "主图",
                    formatter: function (value, row, index) { //格式化方法
                        var a = "<img  style='height: 50px' width='50px'  src='" + value + "'>";
                        return a;
                    }
                },
                {
                    field: "subImgs",
                    title: "副图",
                    formatter: function (value, row, index) {// 前端分割字符串
                        var n = '';
                        var strings = value.split(",");
                        for (var i = 0; i < strings.length; i++) {
                            var m = "<img style='width: 50px' src='" + strings[i] + "'>"
                            n = n + m;
                        }
                        return n;
                    }
                },
                {
                    field: "bid",
                    title: "",
                    formatter: function (value, row, index) {
                        var a = "<button class='btn btn-danger btn-sm' onclick='confirm_del(" + value + ");'>删除</button>"
                        return a;
                    }
                }
            ]
        })
    });

    //确认删除弹框
    function confirm_del(bid) {
        this.bid = bid;
        $("#myModal").modal("show");
    }

    //调用删除方法
    function del(bid) {
        $.ajax({
            url: "/del?bid=" + bid,

            success: function (rs) {
                $("#content").bootstrapTable("refresh");//如果成功 刷新
            }
        })
    }

    //格式化时间
    function changeDateFormat(cellval) {
        var dateVal = cellval + "";
        if (cellval != null) {
            var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
    }

    $(function () {
        $('#a').click(function () { //点击事件添加再传一张
            $('#b').append(
                $('<tr>').append(
                    $('<td>').append(
                        $('<p>').html('<div><input type="file" name="subImgFiles">\n' +
                            '<input  type="hidden"></div>')
                        // .css({margin: "5px"})
                    )
                )
            )
        });

        $("#yes").click(function () { //点击事件关闭确认删除弹框
            del(bid);
            $("#myModal").modal("hide");

        });
    });

    // 网页添加按钮跳转add页面
    function jump() {
        window.location.href = "add.html";
    }

</script>
</html>